<template>
  <div>
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-width="120px"
      :inline="false"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色ID" prop="role_id">
        <el-input v-model="formData.role_id" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-button type="primary" @click="setBtn">输出内容</el-button> -->
      <!-- v-if="showAvatar" -->
      <el-form-item label="头像" prop="avatar" >
        <el-input v-model="formData.avatar" clearable></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script lang='ts' setup>
import axios from "@/services/request";

const formRef = ref<any>(null);

// prop
const props:any = defineProps({
  editVal:  Object,
});

// console.log('editVal',props.editVal)

// 监听传参
watch(props.editVal, (newVal: any)=>{
    console.log('newval',newVal)
  },
  {immediate: true, deep: true}
)

// form
type formDataType = {
  username: any;
  password: any;
  role_id: any;
  status: any;
  avatar: any;
};
const formData = reactive<formDataType>({
  username: "",
  password: "",
  role_id: 38,
  status: 1,
  avatar: "",
  // avatar: "http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5f50505928e60.jpg",
});

// 弹窗数值内的 规则
const rules = ref({
  username: [
    {
      required: true, // 必填
      message: "请输入", //提示信息
      trigger: "blur", // 触发条件
    },
  ],
  password: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  role_id: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
});

// 按钮控制图片栏是否显示 watch 控制
// const showAvatar = computed(() => {
//   if(formData.status == 1){
//     return true;
//   }else{
//     return false
//   }
// });

// const setBtn = () =>{
//   console.log('neirong：', formData.status)
// }

const dataFirst = () =>{
  // if(props.editVal.id){
    // formData = props.editVal
  // }else{
    const formData = reactive<formDataType>({ 
      username: "",
      password: "",
      role_id: 38,
      status: 1,
      avatar: "",
      // avatar: "http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5f50505928e60.jpg",
    });
  // }
}
dataFirst()

const emit = defineEmits([''])

const addAdmin = (val: any) => {
  return axios.post("admin/manager", val);
};
const editAdmin = (id:number, val: any) => {
  return axios.post(`admin/manager${id}`, val);
};

// 提交 按钮
const handleSubmit = async ({
  passCallback,
  thenCallback,
  catchCallback,
  finallyCallback,
}: any) => {
  formRef.value.validate((valid: any) => {
    if (!valid) return;
    // 新增数据
    passCallback()
    if(props.editVal.id){
      editAdmin(props.editVal.id ,formData)
      .then((res: any) => {
        // console.log("res", res);
        if (res.msg == "ok") {
          ElMessage.success("修改成功");
          thenCallback()
        } else {
          ElMessage.warning("修改失败");
        }
      })
      .catch((err:any) => {
        catchCallback()
        console.log("error", err);
      })
      .finally(() => {
        finallyCallback()
      });
    }else{
      addAdmin(formData)
      .then((res: any) => {
        // console.log("res", res);
        if (res.msg == "ok") {
          ElMessage.success("添加成功");
          thenCallback()
        } else {
          ElMessage.warning("添加失败");
        }
      })
      .catch((err:any) => {
        catchCallback()
        console.log("error", err);
      })
      .finally(() => {
        finallyCallback()
      });
    }
    
  });
};

onMounted(()=>{
  console.log('onMounted函数')
  // formData.value = undefined
  dataFirst()
})


defineExpose({
  handleSubmit,
});

</script>
  
<style scoped lang='less'>
  
</style>
